<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Featured Content Slider</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
	<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
	<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
	
	<script type="text/javascript">
	
		var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;
		
		theInterval = function(cur){
			clearInterval(theInt);
			
			if( typeof cur != 'undefined' )
				curclicked = cur;
			
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 3 == curclicked )
					curclicked = 0;
				
			}, 6000);
		};
		
		$(function(){
			
			$("#main-photo-slider").codaSlider();
			
			$navthumb = $(".nav-thumb");
			$crosslink = $(".cross-link");
			
			$navthumb
			.click(function() {
				var $this = $(this);
				theInterval($this.parent().attr('href').slice(1) - 1);
				return false;
			});
			
			theInterval();
		});
	</script>
</head>

<body>
	
	<div id="page-wrap">
											
	<div class="slider-wrap">
		<div id="main-photo-slider" class="csw">
			<div class="panelContainer">

				<div class="panel" title="Panel 1">
					<div class="wrapper">
						<img src="images/tempphoto-1.jpg" alt="temp" style="margin-left:100px"/>
						<div class="photo-meta-data">
							Put a caption here</a><br />
							<span>Description of Content</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 2">
					<div class="wrapper">
						<img src="images/tempphoto-2.jpg" alt="temp" style="margin-left:100px" />
						<div class="photo-meta-data">
							Put a caption here<br />
							<span>Description of Content</span>
						</div>
					</div>
				</div>		
				<div class="panel" title="Panel 3">
					<div class="wrapper">
						
						<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
						
						<h1>More Info Here</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui diam, facilisis non iaculis at, ultrices id lacus. Mauris rutrum, quam et tristique fermentum, justo velit auctor mi, sed semper eros sem quis ante. Phasellus ut sapien vel dolor porttitor accumsan non nec elit. Phasellus faucibus tempor imperdiet. Sed bibendum urna vel quam lacinia sagittis. Nullam quis felis a ligula congue volutpat. Sed ut eros eget nisl tristique blandit. Aliquam fermentum nunc id ante sodales eu fringilla tellus accumsan. In viverra volutpat risus ac congue. Ut volutpat ante in nisi pretium porta.</p>
			<!--			<ul>
							<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
							<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
							<li>1/2 cup AP flour</li>
							<li>1-2 eggs, beaten</li>
							<li>3/4 cup panko-style bread crumbs</li>
							<li>Vegetable oil for frying</li>
			-->			</ul>
					</div>
		<!--		</div>
				<div class="panel" title="Panel 4">
					<div class="wrapper">
						<img src="images/tempphoto-4.jpg" alt="temp" />
						<div class="photo-meta-data">
							A Poem by Shel Silverstein<br />
							<span>Falling Up</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 5">
					<div class="wrapper">
						<img src="images/tempphoto-5.jpg" alt="temp" />
						<div class="photo-meta-data">
							New Video on CSS-Tricks<br />
							<span>Using Wufoo for Web Forms</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 6">
					<div class="wrapper">
						<h1>A Tale of Two Cities</h1>
						<p><em>Charles Dickins</em></p>
						<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
					</div>
		-->
				</div>

			</div>
		</div>
<!--<div style="margin-left:30%;">

-->
		<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
		
		<div id="movers-row">
			<div style="margin-left:160px;"><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<!--<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		--></div>
<!--	
		</div>	
		-->


	</div>
	</div>

</body>

</html>